<template>
  <div class="custom-title-bar main-bg drag">
    <div class="left dis-flex">
      <n-popover trigger="click">
        <template #trigger>
          <div class="tool-icon" title="消息">
            <svg-icon name="ring" />
          </div>
        </template>
        <notice-msg />
      </n-popover>
<!--      <div class="tool-icon" title="消息">-->
<!--        <svg-icon name="ring" />-->
<!--      </div>-->
      <div class="tool-icon" title="发朋友圈">
        <svg-icon name="camera" />
      </div>
      <div class="tool-icon" title="刷新">
        <svg-icon name="refresh" />
      </div>
    </div>
    <div class="my-title">朋友圈</div>
    <div class="right">
      <window-header :is-fixed="false" :show-max="false" />
    </div>
  </div>
</template>

<script setup>
import NoticeMsg from './message/index.vue'
</script>

<style lang="scss" scoped>
$height: 40px;
.custom-title-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: $height;
  line-height: $height;
  border-bottom: 1px solid #E7E7E7;
}

.tool-icon {
  padding: 0 13px;
  line-height: 30px;
  &:hover {
    background-color: #ddd;
  }
}

.my-title {
  line-height: $height;
  font-size: 14px;
}
</style>
